<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<!--  -->
<script type="text/javascript" src="../js/jquery/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="../plug/highcharts/highstock.js"></script>
<script type="text/javascript" src="../plug/highcharts/highcharts-more.js"></script>
<script>
$(function () {

    Highcharts.setOptions({
        global : {
            useUTC : false
        },
        lang:{
        	rangeSelectorZoom:"缩略",rangeSelectorFrom:"从",rangeSelectorTo:"至",
        	months:['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月','九月',  '十月','十一月', '十二月'],
        	shortMonths: ['一月', '二月', '三月', '四月', '五月', '06', '七月', '八月', '九月', '十月', '十一', '十二'],
        	weekdays:['星期日',  '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']

        	
        }
    });

    // Create the chart
    
loadData();
});

function loadData(){
    $.ajax({
		url : '/doroodo/sys/sySbRuninfo_List_Top100',
		data : null,
		dataType : 'json',
		type: "post", 
		async:true,
		contentType: "application/x-www-form-urlencoded; charset=utf-8", 
		
		success : function(r) {
			initMonitor(r);
		},error:function(e){
			console.info(e)
		}
	});
}

function initMonitor(hdata){
 	//var seriesOptions = [{name:'freeMemory',data:[]},{name:'totalMemory',data:[]},{name:'maxMemory',data:[]}];
 	var seriesOptions = [{name:'空闲内存',data:[]},{name:'已用内存',data:[]},{name:'最大可用内存',data:[]}];
	//var names = ['freeMemory', 'totalMemory', 'maxMemory'];
	
	//var data = [];
    
    for (i = hdata.length-1; i >=0; i--) {
    	var x = new Date(hdata[i]["insertTime"]).getTime(), // current time
        y = Number( hdata[i]["freeMemory"]),y2=Number( hdata[i]["totalMemory"]),y3=Number( hdata[i]["maxMemory"]);
    	seriesOptions[0].data.push([x,y]);
            seriesOptions[1].data.push([x,y2]);
            seriesOptions[2].data.push([x,y3]);
        /* data.push([
            new Date(hdata[i]["insertTime"]).getTime(),
            Number( hdata[i]["freeMemory"]),Number( hdata[i]["totalMemory"])
        ]); */
    } 
	
	
	$('#container').highcharts('StockChart', {
        chart : {
            events : {
                load : function () {

                    // set up the updating of the chart each second
                     var series = this.series[0];
                    var series1= this.series[1];
                    var series2= this.series[2];
                    setInterval(function () {
                    	
                        $.ajax({
                    		url : '/doroodo/sys/sySbRuninfo_Get_Now',
                    		data : null,
                    		dataType : 'json',
                    		type: "post", 
                    		async:true,
                    		contentType: "application/x-www-form-urlencoded; charset=utf-8", 
                    		
                    		success : function(r) {
                    			var x = new Date(r["insertTime"]).getTime(), // current time
                                y = Number( r["freeMemory"]),y2=Number( r["totalMemory"]),y3=Number( r["maxMemory"]);
                    			series.addPoint([x, y], true, true);
                    			series1.addPoint([x, y2], true, true);
                    			series2.addPoint([x, y3], true, true);
                    		},error:function(e){
                    			console.info(e)
                    		}
                    	});
                    	                        
                    }, 1000); 
                }
            }
        },

        rangeSelector: {
            buttons: [{
                count: 1,
                type: 'minute',
                text: '1分钟'
            }, {
                count: 5,
                type: 'minute',
                text: '5分钟'
            }
            , {
                count: 30,
                type: 'minute',
                text: '30分钟'
            }, {
                count: 1,
                type: 'hour',
                text: '1小时'
            },{
                count: 12,
                type: 'hour',
                text: '12小时'
            }
            , {
                type: 'all',
                text: '全部'
            }],
            inputEnabled: false,
            selected: 0
        },

        title : {
            text : '实时内存监测'
        },

        exporting: {
            enabled: false
        },
        tooltip: {  
            xDateFormat: '%m-%d %H:%M:%S'//鼠标移动到趋势线上时显示的日期格式  
        },  credits: {
            enabled:false
        },
        plotOptions:{
        	areaspline:{
        		compare:"value"
        	}
        },
        navigator:{
        	 series: {
        		type: 'areaspline',
        		fillOpacity: 0.05,
        		dataGrouping: {
        			smoothed: true
        		},
        		lineWidth: 1,
        		marker: {
        			enabled: true
        		}
        	}, 
        	xAxis: {
        	    tickWidth: 0,
        	    lineWidth: 0,
        	    gridLineWidth: 1,
        	    tickPixelInterval: 200,
        	    dateTimeLabelFormats: {
                    second: '%H:%M:%S',
                    minute: '%m-%e %H:%M',
                    hour: '%m-%e %H:%M',
                    day: '%m-%e %H:%M',
                    week: '%e. %m',
                    month: '%y-%m',
                    year: '%Y'
                },
        	    labels: {
        	        align: 'left',
        	        style: {
        	            color: '#000'
        	        },
        	        x: 3,
        	        y: -4
        	    }
        	}
        },
        xAxis: {
           	type: 'datetime',
           	tickPixelInterval:240,
                   dateTimeLabelFormats: {
                       second: '%H:%M:%S',
                       minute: '%m-%e %H:%M',
                       hour: '%m-%e %H:%M',
                       day: '%m-%e %H:%M',
                       week: '%e. %m',
                       month: '%y-%m',
                       year: '%Y'
                   }
           },
        series :seriesOptions
    });
}
</script>
</head>
<body>
<div id="container" style="width:100%;height:100%"><h2>无数据</h2></div>
</body>
</html>